<template>
  <div class="mvs">
    <div class="mvs-top-content">
      <div class="mvs-top-nav">
        <span class="mvs-top-nav-span">地区：</span>
        <ul class="mvs-top-nav-list">
          <li
            class="mvs-top-nav-item"
            :class="[active===index ? 'active':'']"
            @click="handleclickToplist(nav,index)"
            v-for="(nav,index) of region "
            :key="nav"
          >{{nav}}</li>
        </ul>
      </div>

      <div class="mvs-top-nav">
        <span class="mvs-top-nav-span">类型：</span>
        <ul class="mvs-top-nav-list">
          <li
            class="mvs-top-nav-item"
            :class="[type===index ? 'active':'']"
            @click="handleclickTopClasslist(nav,index)"
            v-for="(nav,index) of classs "
            :key="nav"
          >{{nav}}</li>
        </ul>
      </div>

      <div class="mvs-top-nav">
        <span class="mvs-top-nav-span">排序：</span>
        <ul class="mvs-top-nav-list">
          <li
            class="mvs-top-nav-item"
            :class="[sorts===index ? 'active':'']"
            @click="handleclickTopsortList(nav,index)"
            v-for="(nav,index) of sort "
            :key="nav"
          >{{nav}}</li>
        </ul>
      </div>
    </div>

    <div class="mvs-Content-wramp">
      <ul class="mvs-Content-list">
        <li
          class="mvs-Content-item"
          v-for="item of MvsList "
          :key="item.id"
          @click="handleplaymv(item)"
        >
          <div class="mvs-Content-box">
            <img :src="$utils.getImgUrl(item.cover,170, 100)" alt class="mvs-Content-img" />
            <div class="mvs-Content-top-img-title">
              <i class="iconfont icon-component icon-play"></i>
              {{item.playCount}}
            </div>
            <span class="mvs-Content-foot-title">{{((item.duration)/1000)}}</span>
            <div class="mvs-Content-hover-background">
              <i class="play-icon iconfont icon-component icon-play"></i>
            </div>
            <div class="mvs-Content-foot-songs">{{item.name}}</div>
            <div class="mvs-Content-foot-sigers">{{item.artistName}}</div>
          </div>
        </li>
      </ul>
    </div>

    <div class="mvs-Content-foot" style="float:right">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="page"
        :page-size="pageSize"
        @current-change="Changes"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
//https://api.mtnhao.com/mv/all?limit=
import { fetchMV } from "../api";
//import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      region: ["全部", "内地", "港台", "欧美", "日本", "韩国"],
      active: 0,

      activeRegion: "全部",

      classs: ["全部", "官方版", "原生版", "现场版", "网易出品"],
      type: 0,
      activeClass: "全部",

      sort: ["上升最快", "最新", "最热"],
      sorts: 0,
      activeSort: "上升最快",

      MvsList: [],
      page: 1,
      pageSize: 40,
      total: 0,

      songTime: 0,
      Arrid: [],
      artistId: [],
    };
  },
  mounted() {
    this.init();
  },
  computed: {
    //...mapState(["currentSong"]),
  },
  methods: {
    //...mapMutations(["setCurrentSong"]),
    init() {
      this.getPlayMvsToplist();
    },
    handleclickToplist(nav, index) {
      this.active = index;
      this.activeRegion = nav;
      // console.log(this.activeRegion);
      this.getPlayMvsToplist();
    },
    handleclickTopClasslist(nav, index) {
      this.type = index;
      this.activeClass = nav;
      // console.log(this.activeClass);
      this.getPlayMvsToplist();
    },
    handleclickTopsortList(nav, index) {
      this.sorts = index;
      this.activeSort = nav;
      // console.log(this.activeSort);
      this.getPlayMvsToplist();
    },
    Changes(page) {
      this.page = page;
      this.getPlayMvsToplist();
    },

    getTime(item) {
      this.times = item.duration;
      console.log(this.times);
      console.log(item.duration);
    },

    getPlayMvsToplist() {
      fetchMV({
        limit: this.pageSize,
        offset: (this.page - 1) * this.pageSize,
        area: this.activeRegion,
        order: this.activeSort,
        type: this.activeClass,
      }).then((res) => {
        this.MvsList = res.data;
        //console.log(res.data);
        if (res.count === undefined) {
          res.count = 5000;
        } else {
          this.total = res.count;
        }
      });
    },
    handleplaymv(item) {
      this.$router.push({
        path: "/playmv",
        query: {
          Arrid: item.id,
          ArtistId: item.artistId,
        },
      });
    },
  },
};
</script>

<style lang='less' scoped>
.mvs {
  padding: 0 50px;
  color: #4a4a4a;
  font-size: 0.85714rem;
  .mvs-top-content {
    height: 160px;
  }
  .mvs-top-nav {
    margin-top: 15px;
    height: 29px;

    .mvs-top-nav-span {
      position: relative;
      top: 35px;
    }
    .mvs-top-nav-list {
      height: 100%;

      margin-top: 15px;
      overflow: hidden;
    }

    .mvs-top-nav-item {
      padding: 4px 12px;
      border-radius: 9px;
      margin-left: 64px;
      float: left;
      cursor: pointer; //鼠标

      &:hover {
        color: black;
      }
      &.active {
        background-color: #fbedec;

        color: red;
      }

      //white-space: nowrap;
      //overflow: hidden;
    }
  }
  .mvs-Content-wramp {
    .mvs-Content-list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding-top: 8px;
    }
    .mvs-Content-item {
      width: 25%;
      min-width: 120px;
      padding: 0px 43px 18px 0px;
      flex-shrink: 1;
    }
    .mvs-Content-box {
      position: relative;
      left: 5px;

      border-radius: 6px;
      overflow: hidden;
      &:hover {
        .mvs-Content-hover-background {
          opacity: 0.7;
        }
      }
    }
    .mvs-Content-foot-title {
      position: absolute;
      bottom: 48px;

      right: 3px;
      color: #fff;
    }
    .mvs-Content-img {
      height: 100%;
      width: 100%;
      border-radius: 6px;
    }
    .mvs-Content-top-img-title {
      position: absolute;
      top: 3px;
      right: 24px;
      color: #fff;
    }
    .mvs-Content-hover-background {
      position: absolute;
      margin: auto;
      left: 0;
      top: 0;
      right: 0;
      bottom: 40px;

      width: 50px;
      height: 50px;
      background-color: rgba(255, 255, 255, 0.7);
      line-height: 50px;
      text-align: center;
      color: red;
      border-radius: 50%;

      opacity: 0;
      transition: all 0.3s;

      .icon-play {
        font-size: 22px;
        margin-left: 1px;
      }
    }

    .mvs-Content-foot-songs {
      padding-top: 6px;
      font-size: 12px;
      color: #666;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mvs-Content-foot-sigers {
      margin-top: 10px;
      font-size: 10px;
      color: #666;
      width: 100%;

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  // .mvs-Content-foot {
  // }
}
</style>